<template>
	<view>
		<view class="" v-if="patientList.length>0">
			<view class="top-wrap"></view>
			<view class="swiper-wrap" style=" height: 200rpx;">
				<uni-swiper-dot style='height:200rpx;' :info="patientList" :current="current" :mode="mode"
					:dots-styles="dotsStyles" field="content">
					<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
						<swiper-item v-for="(data,index) in patientList" :key="index">
							<view class="swiper-item ">
								<view class="">
									<h4>
										<span style="font-size: 33rpx;">{{ data.name }}</span>
										<span class="tagsColor">{{ data.relation || '本人'}}</span>
									</h4>
									<view class="top-info">
										<text class="info" v-if='data.sex==1'>男</text>
										<text class="info" v-else-if="data.sex== 2">女</text>
										<text class="info" style="padding:0 10rpx;">|</text>
										<text class="info">{{ data.age || 0 }}岁</text>
									</view>
								</view>
								<button class="infoBtn" type="default" @click="clickItem(Number(data.patientId))">
									基本信息
								</button>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>


			<view class="tabsView">
				<view v-model="active" @click="clickHealth">
					<span :style="active == 0 ? healthStyle : lifeStyle">健康史</span>
				</view>
				<view class="lifeTab" :style="active == '1' ? healthStyle : lifeStyle" v-model="active"
					@click="clickLife">
					<span>生活习惯</span>
				</view>
				<!-- <view class="orderDetail" :style="active == '2' ? healthStyle : lifeStyle" v-model="active"
					@click="clickOrderDetail">
					<span>订单详情</span>
				</view> -->
			</view>


			<view class="" v-show="active == '0'">
				<view class="info-wrap">
					<view class="">
						<h3 class='topTitle'>既往史</h3>
						<view class="">
							<h4 class='h4'>是否患有以下疾病</h4>
						</view>
						<view class="wapper">
							<span class="" v-for="(item, index) in checkedArr" :key="index">
								<span class='h4 h4Tag' v-if='item.length>0'  @click="deleteTag(index,checkedArr)">{{ item }}
									<view class="icon_delete_bg">
										<image class="delete_style"
											src="../static/images/btn_close@2x.png">
										</image>
									</view>
								</span>
							</span>
						</view>

						<image class="addImg" src="../static/images/btn_h_add@2x.png" mode="" @click="getDiaList(0)">
						</image>

						<h4 class='h4'>住院史</h4>
						<radio-group class="radio-wrap" @change="hosChange">
							<label class="radio">
								<radio value="0" :checked="hospitalizationValue == 0" color="#4DCBBF"
									style="transform:scale(0.7)" />
								无
							</label>
							<label>
								<radio value="1" :checked="hospitalizationValue == 1" color="#4DCBBF"
									style="transform:scale(0.7)" />
								有
							</label>
						</radio-group>
						<input class="input" style="display: block;" v-if="hospitalizationValue == 1"
							v-model="hospitalizationName" placeholder="点击这里输入" />
					</view>
					<view class="">
						<h4 class="h4">手术史</h4>
						<radio-group class="radio-wrap" name="" @change="shoushuChange">
							<label class="radio">
								<radio value="0" :checked="operationValue == 0" color="#4DCBBF"
									style="transform:scale(0.7)" />
								无
							</label>
							<label>
								<radio value="1" :checked="operationValue == 1" color="#4DCBBF"
									style="transform:scale(0.7)" />
								有
							</label>
						</radio-group>
						<input class="input" style="display: block;" v-if="operationValue == 1" v-model="operationName"
							placeholder="点击这里输入" />
					</view>
					<view class="">
						<h4 class="h4" style="line-height: 60rpx;">过敏史（包括食物、药物、接触过敏等）</h4>
						<input class="input" style="display: block;" v-model="allergyName" placeholder="点击这里输入" />
					</view>
				</view>
				<view class=" info-wrap">
					<h3 class="topTitle">用药史</h3>
					<view class="h4">降脂药</view>
					<textarea :show-confirm-bar="false" class="input drugInput" style="display: block;" v-model="healthObj.dropFat" placeholder="点击这里输入" />
					<view class="h4">降压药</view>
					<textarea :show-confirm-bar="false" class="input drugInput" style="display: block;" v-model="healthObj.dropPressure " placeholder="点击这里输入" />
					<view class="h4">降糖药</view>
					<textarea :show-confirm-bar="false" class="input drugInput" style="display: block;" v-model="healthObj.dropSeat " placeholder="点击这里输入" />
					<view class="h4">抗凝溶栓药</view>
					<textarea :show-confirm-bar="false" class="input drugInput" style="display: block;" v-model="healthObj.thrombusName" placeholder="点击这里输入" />
					<h4 class="h4">正在服用其他药物</h4>
					<textarea :show-confirm-bar="false" class="input drugInput" style="display: block;" v-model="healthObj.otherDrugName" styles=''
						placeholder="点击这里输入" />
				</view>
				<view class=" info-wrap">
					<h3 class="topTitle">家族史</h3>
					<view><text class="h4">家人是否患有以下疾病</text></view>
					<view class="wapper">
						<span class="" v-for="(item, index) in familyName" :key="index">
							<span class='h4 h4Tag' 
								v-if='item.length>0' @click="deleteTag(index,familyName)" >{{ item }}
								<view class="icon_delete_bg">
									<image class="delete_style"
										src="../static/images/btn_close@2x.png">
									</image>
								</view>
							</span>
						</span>
					</view>
					<image class="addImg" src="../static/images/btn_h_add@2x.png" mode="" @click="getDiaList(1)">
					</image>

				</view>
				<view class="footerBtn">
					<button class="arc_button btn_appointment" type="primary"
						style="width:94%; margin:40rpx 20rpx 60rpx; "
						@click="saveHealthy">
						保存
					</button>
				</view>
				
			</view>
			<view class="" v-show="active == '1'">
				<view class="info-wrap">
					<view class="">
						<h4 class="h4" style="margin-top:0;">吸烟</h4>
						<radio-group class="radio-wrap" @change="smokeChange">
							<label class="radio">
								<radio value="无" :checked="smokeRadio == '无'" color="#4DCBBF"
									style="transform:scale(0.7)" />
								无
							</label>
							<label>
								<radio value="有" :checked="smokeRadio == '有'" color="#4DCBBF"
									style="transform:scale(0.7)" />
								有
							</label>
						</radio-group>
					</view>
					<view class="">
						<h4 class="h4">饮酒</h4>
						<radio-group class="radio-wrap" @change="drinkChange">
							<label class="radio">
								<radio value="无" :checked="drinkRadio == '无'" color="#4DCBBF"
									style="transform:scale(0.7)" />
								无
							</label>
							<label>
								<radio value="有" :checked="drinkRadio == '有'" color="#4DCBBF"
									style="transform:scale(0.7)" />
								有
							</label>
						</radio-group>
					</view>
					<view class="">
						<h4 class="h4">饮食口味</h4>
						<radio-group class="radio-wrap" @change="toastChange">
							<label class="radio" v-for="(item, index) in listEat" :key="index">
								<radio :value="item.dictValue" :checked="toastRadio === item.dictValue" color="#4DCBBF"
									style="transform:scale(0.7)" />
								{{ item.dictValue }}
							</label>
						</radio-group>
					</view>
					<view class="">
						<h4 class="h4">饮食油腻程度</h4>
						<radio-group class="radio-wrap" @change="oilChange">
							<label class="radio" v-for="(item, index) in listGreasy" :key="index">
								<radio :value="item.dictValue" :checked="oilRadio === item.dictValue" color="#4DCBBF"
									style="transform:scale(0.7)" />
								{{ item.dictValue }}
							</label>
						</radio-group>
					</view>

					<view class="">
						<h3 class="h3" style="margin: 24rpx 0;font-weight: bold;">每周运动情况</h3>
						<h4 class="h4" style="margin:10rpx 0;">每周运动天数</h4>
						<view class="yundong">

							<input class="input uni-input" type="number" v-model="sportDay" placeholder="请输入运动天数" />
							<!-- <uni-easyinput type="number"></uni-easyinput> -->
							<view class="textTip">天</view>
						</view>
						<h4 class="h4" style="margin:10rpx 0;">每次运动时长</h4>
						<view class="yundong">
							<input class="input uni-input" type="number" v-model="sportTime" placeholder="请输入运动时长" />
							<view class="textTip">小时</view>
						</view>
						<h4 class="h4" style="margin:10rpx 0;">睡眠状况</h4>
						<radio-group class="radio-wrap" @change="sleepChange">
							<label class="radio" v-for="(item, index) in listSleep" :key="index">
								<radio :value="item.dictValue" :checked="sleepRadio === item.dictValue" color="#4DCBBF"
									style="transform:scale(0.7)" />
								{{ item.dictValue }}
							</label>
						</radio-group>
						<h4 class="h4" style="margin:10rpx 0;">每日睡眠时长</h4>
						<view class="yundong">

							<input class="input uni-input" type="number" v-model="sleepTime" placeholder="请输入睡眠时长" />
							<view class="textTip">小时</view>
						</view>
					</view>
				</view>
				<view class="footerBtn">
					<button class="btn_appointment arc_button" type="primary"
						style="margin:40rpx 20rpx 60rpx;width:94%; "
						@click="saveLive">
						保存
					</button>
				</view>
			</view>
			<!-- <view class="" v-show="active =='2'">
				<view class="info-wrap">
					订单详情

				</view>
			</view> -->

		</view>

		<view class="noInfo_Img" v-else-if="showNoInfo">
			<image src="../static/images/icon_lack_message@2x.png"></image>
		</view>
		<!-- 疾病弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="dialogDiangnosis" v-show="diagnosisList.length >= 0">
			<h4 style='text-align: center;margin-bottom: 10rpx;'>请选择疾病</h4>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<checkbox-group class="block" @change="changeCheckbox">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in diagnosisList" :key='index' >
						<uni-list-item  :title="item.content">
							<template v-slot:footer>
								<checkbox :value="String(item.content)"
									:checked="diagCheckedArr.includes(String(item.content))"
									:class="{ checked: diagCheckedArr.includes(String(item.content)) }"></checkbox>
							</template>
						</uni-list-item>
						</label>
					</checkbox-group>
				</scroll-view>

				<view class="btn_style">
					<button class="arc_button width"
						style="background: -webkit-linear-gradient(#77E2A4, #4CCDBC) !important;width:200rpx;line-height: 60rpx; height:60rpx; border-radius: 30rpx;"
						type="primary" @click="saveDiagnosis">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		edithealth,
		editliveHabit,
		getDiagnosis,
		// getDrugs,
		getLiveHabit,
		healthHistory,
		livingHabit
	} from '@/api/my.js';
	import {
		patientList
	} from '@/api/prescribing.js';
	export default {
		data() {
			return {
				mode: 'default',
				dotsStyles: {
					backgroundColor: 'rgba(76, 205, 188,0.3)',
					selectedBackgroundColor: '#4ccdbc',
				},
				showNoInfo: false,
				lifeStyle: "color: #9c9b9b",
				healthStyle: "color: #000000; font-weight: bold; font-size:33rpx; border-bottom: 6rpx solid #4ccdbc",
				healthObj: {}, // 健康史
				// lifeHabits: [], //生活数据
				lifeHabitsObj: {}, //生活数据
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				sportDay: '',
				sportTime: '',
				sleepTime: '',
				listEat: [],
				listGreasy: [],
				listSleep: [],
				active: '0',
				patientList: [], //就诊人列表
				diagnosisList: [], //疾病列表
				drugsList: [], //药品列表
				checkedArr: [], //页面展示的疾病选中的值
				diagCheckedArr: [], //复选框疾病选中的值
				// familyArr:[], //家族史
				diagsType: 0, // 疾病史-0  家族史-1
				drugsType: 0, //药品类型  0-降脂药 1-降压药  2-降糖药 3-抗凝溶栓
				drug0Arr: [], //药品选中的值
				drug1Arr: [],
				drug2Arr: [],
				drug3Arr: [],
				// drug0CheckArr: [],
				// drug1CheckArr: [],
				// drug2CheckArr: [],
				// drug3CheckArr: [],
				content5: '', // 其他药品
				diseaseName: '', //疾病史
				operationName: '', //手术史
				operationValue: '', //是否有手术史
				familyName: [], //家族史
				// familyCheckedArr:[],
				allergyName: '', //过敏史
				hospitalizationName: '', //住院史
				hospitalizationValue: '', //有无住院

				drugValue: 0, //用药史有无

				sleepRadio: 0,
				smokeRadio: 0,
				drinkRadio: 0,
				toastRadio: 0,
				oilRadio: 0,

				current: 0,
				swiperDotIndex: 0,
				currentChangeId: 0 //当前就诊人id
			};
		},
		onLoad() {
			// 获取就诊人列表
			this.getPatientList();
			// // 查询健康史
			// this.getHealthHistory()
			// 查询字典 生活习惯的配置项
			this.getliveDic();
		},
		methods: {
			//删除标签
			deleteTag(index, selectedArr) {
				selectedArr.splice(index, 1);
			},
			upper: function(e) {
				// console.log(e);
			},
			lower: function(e) {
				// console.log(e);
			},
			scroll: function(e) {
				// console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			// 保存疾病
			saveDiagnosis() {
				if (this.diagsType == 0) {
					this.checkedArr = this.diagCheckedArr;
					// console.log(this.checkedArr,'999999---')
				} else if (this.diagsType == 1) {
					this.familyName = this.diagCheckedArr;
				}
				this.$refs.popup.close();
			},
			// 保存药品
			saveDurg() {
				if (this.drugsType == 0) {
					this.drug0Arr = this.drugCheckArr;
				} else if (this.drugsType == 1) {
					this.drug1Arr = this.drugCheckArr;
				} else if (this.drugsType == 2) {
					this.drug2Arr = this.drugCheckArr;
				} else if (this.drugsType == 3) {
					this.drug3Arr = this.drugCheckArr;
				}
				this.$refs.drugPopup.close();
			},
			getliveDic() {
				uni.showLoading({
					title: '加载中'
				});
				// 查询字典
				getLiveHabit()
					.then(res => {
						uni.hideLoading();
						this.listEat = res.data.listEat;
						this.listGreasy = res.data.listGreasy;
						this.listSleep = res.data.listSleep;
					})
					.catch(err => {
						console.log(err, ' zidian--生活习惯err');
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},
			// 保存健康史
			saveHealthy() {
				// let
				let healthObj = {
					diseaseTitle: '疾病史',
					diseaseName: this.checkedArr.toString(), //this.checkedArr.toString().replace(',','，'), //"高血压，糖尿病",
					diseaseType: 'label',
					operationTitle: '手术史',
					operationValue: this.operationValue || '',
					operationName: this.operationName || '', // "之前做过一次手术",
					hospitalizationValue: this.hospitalizationValue || '',
					operationType: 'single',
					familyTitle: '家族史',
					familyName: this.familyName.toString() || '', //"糖尿病",
					familyType: 'label',
					allergyTitle: '过敏史',
					allergyName: this.allergyName || '', //"海鲜过敏",
					allergyType: 'single',
					// drugName: '', //用药史 所有药品拼起来
					hospitalizationTitle: '住院史',
					hospitalizationName: this.hospitalizationName, //"住过一次医院",
					hospitalizationType: 'single',
					dropFat:this.healthObj.dropFat,
					dropPressure:this.healthObj.dropPressure,
					dropSeat :this.healthObj.dropSeat,
					thrombusName:this.healthObj.thrombusName,
					otherDrugName: this.healthObj.otherDrugName,
					
				};
				healthObj.patientId = this.currentChangeId;
				// Object.assign(this.healthObj,...healthObj)
				// console.log(healthObj,'9999如此那9999')
				// return
				uni.showLoading({
					title: '加载中'
				});
				edithealth(healthObj)
					.then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							duration: 2000
						})
					})
					.catch(err => {
						console.log(err, '编辑健康史err');
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},
			// 保存生活习惯
			saveLive() {
				let liveObj = {
					patientId: this.currentChangeId,
					smokeRadio: this.smokeRadio,
					drinkRadio: this.drinkRadio,
					toastRadio: this.toastRadio,
					oilRadio: this.oilRadio,
					sportDay: Number(this.sportDay) || 0,
					sportTime: Number(this.sportTime) || 0,
					sleepRadio: this.sleepRadio,
					sleepTime: Number(this.sleepTime) || 0,
				};
				uni.showLoading({
					title: '加载中'
				});
				editliveHabit(liveObj)
					.then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							duration: 2000
						})
					})
					.catch(err => {
						console.log(err, '编辑生活习惯err');
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},

			// 清空健康使数据
			clearHealth() {
				this.checkedArr = [];
				this.operationValue = 0;
				this.operationName = '';
				this.hospitalizationValue = 0;
				this.familyName = [];
				this.allergyName = '';
				this.hospitalizationName = '';
				this.healthObj.dropFat = '';
				this.healthObj.dropPressure = '';
				this.healthObj.dropSeat = '';
				this.healthObj.thrombusName = '';
				this.healthObj.otherDrugName = '';
				
			},

			clearLiving() {
				this.sleepRadio = 0;
				this.smokeRadio = 0;
				this.drinkRadio = 0;
				this.toastRadio = 0;
				this.oilRadio = 0;
				this.sportDay = '';
				this.sportTime = '';
				this.sleepTime = '';

			},
			change(e) {
				let curr = e.detail.current;
				// console.log(curr, '切换后的信息');
				this.clearHealth(); //清空健康使
				this.clearLiving() //清空生活习惯
				this.active = '0';
				this.swiperDotIndex = this.current = e.detail.current;
				this.currentChangeId = this.patientList[curr].patientId;
				// console.log(this.currentChangeId, '切换后的当前患者id');
				// 切换就诊人时调用查询健康史和生活习惯接口 回显信息
				this.getHealthHistory(this.currentChangeId);
				// this.getLivingHabit(this.currentChangeId);
			},
			// 点击基本信息 跳转到编辑就诊人信息
			clickItem(id) {
				uni.navigateTo({
					url: `/pagesSub-My/my/editPatients?patientId=${id}`
				});
			},
			// 选择疾病
			changeCheckbox(e) {
				this.diagCheckedArr = e.detail.value;
			},

			// 选择药品
			changeCheckDrugbox(e) {
				this.drugCheckArr = e.detail.value;
			},
			//吸烟状况
			smokeChange(val) {
				this.smokeRadio = val.target.value;
			},
			// 饮酒状况
			drinkChange(val) {
				this.drinkRadio = val.target.value;
			},
			// 饮食口味状况
			toastChange(val) {
				this.toastRadio = val.target.value;
			},
			// 油腻程度状况
			oilChange(val) {
				this.oilRadio = val.target.value;
			},
			// 睡眠状况
			sleepChange(val) {
				this.sleepRadio = val.target.value;
			},
			// 获取疾病列表
			getDiaList(type) {
				// 疾病史 -0  家族史-1
				this.diagsType = type;
				this.diagCheckedArr = [];

				this.$refs.popup.open('center');
				uni.showLoading({
					title: '加载中'
				});

				getDiagnosis()
					.then(res => {
						
						uni.hideLoading();
						this.diagnosisList = res.rows;
					})
					.catch(err => {
						// console.log(err, '疾病列表err');
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});

				if (type == 0) {
					// 既往史--疾病史
					this.diagCheckedArr = this.checkedArr;
				} else {
					this.diagCheckedArr = this.familyName;
				}

			},
			hosChange(val) {
				this.hospitalizationValue = val.target.value;
				if (this.hospitalizationValue == 0) {
					this.hospitalizationName = '';
				}
			},
			shoushuChange(val) {
				this.operationValue = val.target.value;
				if (this.operationValue == 0) {
					this.operationName = '';
				}
			},
			yaoChange(val) {
				this.drugValue = val.target.value;
				if (this.drugValue == 0) {
					this.content5 = '';
				}
			},
			//
			getPatientList() {
				uni.showLoading({
					title: '加载中'
				});
				// 查询关系字典
				// 打开弹窗的时候获取就诊人列表
				patientList()
					.then(res => {
						// console.log(res, '就诊人res');
						uni.hideLoading();
						this.patientList = res.rows;
						this.currentChangeId = res.rows[0].patientId;
						if (res.rows.length <= 0) {
							this.showNoInfo = true;
						}
						// 查询健康史
						this.getHealthHistory(this.currentChangeId)
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
					});
			},

			clickHealth() {
				// console.log('切换健康史');
				this.active = '0';
				this.getHealthHistory(this.currentChangeId);
			},
			clickLife() {
				// console.log('切换生活习惯');
				this.clearLiving();
				this.active = '1';
				this.getLivingHabit(this.currentChangeId);
			},

			// clickOrderDetail(){
			// 	this.active = '2';
			// },
			// 健康史
			getHealthHistory(id) {
				// console.log(id, '99999id')
				// debugger
				uni.showLoading({
					title: '加载中'
				});
				healthHistory(id)
					.then(res => {
						uni.hideLoading();
						this.healthObj = res.data || {};
						// 健康史信息回显
						if (res.data) {

							const {
								diseaseName,
								operationValue,
								operationName,
								hospitalizationValue,
								familyName,
								allergyName,
								hospitalizationName,
								// listDrug
							} = res.data || {};
							this.checkedArr = diseaseName.split(',')||  [];
							this.operationValue = operationValue;
							this.operationName = operationName || '';
							this.hospitalizationValue = hospitalizationValue;
							this.familyName = familyName.split(',') || [];
							this.allergyName = allergyName;
							this.hospitalizationName = hospitalizationName;
						
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
						console.log(err, '健康史err');
					});
			},
			// 生活习惯
			getLivingHabit(id) {
				livingHabit(id)
					.then(res => {
						uni.hideLoading();
						if (res.data) {
							this.lifeHabitsObj = res.data || {}
							this.smokeRadio = res.data.smokeRadio || '';
							this.drinkRadio = res.data.drinkRadio || '';
							this.toastRadio = res.data.toastRadio;
							this.oilRadio = res.data.oilRadio;
							this.sportDay = res.data.sportDay;
							this.sportTime = res.data.sportTime;
							this.sleepRadio = res.data.sleepRadio;
							this.sleepTime = res.data.sleepTime;
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none',
							duration: 3000
						});
						console.log(err, '健康史err');
					});
			}
		}
	};
</script>

<style>
	@import url("../../static/css/style.css");

	.top-wrap {
		height: 200rpx;
		margin-bottom: 20rpx;
		background: url(../static/images/bg_h_dang@2x.png) 100% no-repeat;
		background-size: 100%;
	}

	.swiper-box {
		height: 200rpx;
	}

	.swiper-wrap {
		margin: -100rpx 20rpx 20rpx;
		height: 200rpx;
	}

	.swiper-item {
		padding: 30rpx;
		height: 140rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.tagsColor {
		background-color: #D8F8EF;
		color: #81CFC2;
		padding: 4rpx 20rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	/* tabs选项卡 */
	.tabsView {
		width: 250rpx;
		/* font-size: 29rpx; */
		line-height: 40rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-around;
		font-size: 29rpx;
		padding-bottom: 20rpx;
	}

	/* .lifeStyle {
		color: '#9c9b9b';
		font-size: '29rpx';
		float: left;
	} */

	/* .healthStyle {
		color: '#3cb4ff';
		font-size: '29rpx';
		float: left;
		margin-left: 10rpx;
		border-bottom: '4rpx solid #3cb4ff';
	} */

	.top-info {
		margin-top: 30rpx;
	}

	.infoBtn {
		background-color: #4DCBBF !important;
		color: #FFFFFF !important;
		 height: 40rpx;
		line-height: 40rpx;
		width: 150rpx;
		border-radius: 40rpx;
		position: relative;
		/* left: 100rpx; */
		left: 210rpx;
    	top: -59rpx;
		font-size: 23rpx;
	}

	.info-wrap {
		background-color: #ffffff;
		/* margin:0 20rpx 20rpx; */
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.topTitle {
		font-size: 32rpx;
		margin-bottom: 25rpx;
		font-weight: 700;
	}
	.h3{
		font-size: 32rpx;
	}

	.h4 {
		font-size: 30rpx;
		line-height: 40rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
	}

	.yundong{
		display: flex;
	}
	.textTip {
		font-size: 28rpx;
		/* position: relative;
		top: -19rpx;
		left:10rpx;
		display: inline-block; */
		margin-left: 10rpx;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.tag-view {
		padding: 10rpx 10rpx 0 10rpx;
	}

	.h4Tag {
		padding: 5rpx 13rpx 5rpx 19rpx;
		font-size: 27rpx;
		border: 2rpx solid #4CCCBF;
		border-radius: 40rpx;
		color: #000000;
		display: flex;
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 6rpx;
	}

	.tagStyle {
		background-color: #4CCCBF;
		color: #FFFFFF;
	}

	.icon_delete_bg {
		width: 30rpx;
		height: 30rpx;
		margin-left: 10rpx;
		position: relative;
		top: -6rpx;
	}

	.delete_style {
		position: absolute;
		top:10rpx;
		left: 0;
		width: 30rpx;
		height: 30rpx;
	}

	.input {
		background-color: #F6F6F6;
		font-size: 28rpx;
		height: 60rpx;
		padding-left: 10rpx;
		border-radius: 5rpx;
		display: inline-block;
	}
	.drugInput{
		margin:20rpx 0;
		padding-top: 10rpx;
		/* line-height: 30px; */
		height: 120rpx;
		width: 100%;
	}
	

	.radio-wrap {
		margin: 14rpx auto;
		font-size: 28rpx;
	}

	.radio {
		margin-right: 10rpx;
	}

	.addImg {
		margin-top:15rpx;
		width: 75rpx;
		height: 36rpx;
	}

	.addBtn {
		background-color: limegreen;
		height: 40rpx;
		width: 80rpx;
		line-height: 40rpx;
		color: #ffffff;
		/* margin: 10rpx auto; */
	}

	.dialogDiangnosis {
		padding: 30rpx;
		width: 250px;
		/* height: 385px; */
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.scroll-Y {
		height: 710rpx;
	}

	.btn_style {
		display: flex;
		justify-content: center;
		margin-top: 26rpx;
	}

	.width {
		width: 200rpx;
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC) !important;
		/* margin: 10px auto; */
	}
	.btn_appointment{
		background: -webkit-linear-gradient(#77E2A4, #4CCDBC);
		color: #FFFFFF;
	}
	.footerBtn{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing:content-box;
	}
</style>
